import React, { useState } from 'react';
import { User, Mail, Phone, MapPin, Calendar, Camera, Edit2, Save, X } from 'lucide-react';

const ProfilePage: React.FC = () => {
  const [isEditing, setIsEditing] = useState(false);
  const [profile, setProfile] = useState({
    name: '张三',
    email: 'zhangsan@example.com',
    phone: '+86 138 0013 8000',
    location: '北京市朝阳区',
    joinDate: '2024-01-15',
    bio: '热爱旅行的探索者，喜欢体验不同文化和美食。'
  });

  const [editProfile, setEditProfile] = useState(profile);

  const handleSave = () => {
    setProfile(editProfile);
    setIsEditing(false);
  };

  const handleCancel = () => {
    setEditProfile(profile);
    setIsEditing(false);
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setEditProfile({
      ...editProfile,
      [e.target.name]: e.target.value
    });
  };

  return (
    <div className="min-h-screen bg-gray-50 py-4 sm:py-8 page-container">
      <div className="content-centered max-w-4xl mx-auto">
        <div className="bg-white rounded-lg shadow-sm overflow-hidden">
          {/* 头部区域 - 移动端优化 */}
          <div className="bg-gradient-to-r from-blue-500 to-purple-600 px-4 sm:px-6 py-6 sm:py-8">
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0">
              <div className="flex items-center">
                <div className="relative">
                  <div className="h-16 w-16 sm:h-20 sm:w-20 rounded-full bg-white flex items-center justify-center">
                    <User className="h-8 w-8 sm:h-10 sm:w-10 text-gray-400" />
                  </div>
                  <button className="absolute bottom-0 right-0 h-5 w-5 sm:h-6 sm:w-6 bg-blue-600 rounded-full flex items-center justify-center text-white hover:bg-blue-700 transition-colors">
                    <Camera className="h-2.5 w-2.5 sm:h-3 sm:w-3" />
                  </button>
                </div>
                <div className="ml-4 sm:ml-6">
                  <h1 className="text-responsive font-bold text-white text-balance">{profile.name}</h1>
                  <p className="text-sm sm:text-base text-blue-100 truncate">{profile.email}</p>
                </div>
              </div>
              
              <div className="flex flex-col sm:flex-row gap-2 sm:space-x-2 sm:gap-0 w-full sm:w-auto">
                {isEditing ? (
                  <>
                    <button
                      onClick={handleSave}
                      className="inline-flex items-center justify-center px-3 sm:px-4 py-2 border border-transparent text-sm font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50 transition-colors"
                    >
                      <Save className="h-4 w-4 mr-2" />
                      保存
                    </button>
                    <button
                      onClick={handleCancel}
                      className="inline-flex items-center justify-center px-3 sm:px-4 py-2 border border-white text-sm font-medium rounded-md text-white hover:bg-white hover:text-blue-600 transition-colors"
                    >
                      <X className="h-4 w-4 mr-2" />
                      取消
                    </button>
                  </>
                ) : (
                  <button
                    onClick={() => setIsEditing(true)}
                    className="inline-flex items-center justify-center px-3 sm:px-4 py-2 border border-white text-sm font-medium rounded-md text-white hover:bg-white hover:text-blue-600 transition-colors"
                  >
                    <Edit2 className="h-4 w-4 mr-2" />
                    编辑资料
                  </button>
                )}
              </div>
            </div>
          </div>

          {/* 个人信息 - 移动端优化 */}
          <div className="px-4 sm:px-6 py-4 sm:py-6">
            <h2 className="text-responsive font-medium text-gray-900 mb-4 sm:mb-6 text-balance">个人信息</h2>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 sm:gap-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  <User className="h-4 w-4 inline mr-2" />
                  姓名
                </label>
                {isEditing ? (
                  <input
                    type="text"
                      name="name"
                      value={editProfile.name}
                      onChange={handleChange}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm sm:text-base"
                    />
                  ) : (
                    <p className="text-gray-900 text-sm sm:text-base">{profile.name}</p>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    <Mail className="h-4 w-4 inline mr-2" />
                    邮箱
                  </label>
                  {isEditing ? (
                    <input
                      type="email"
                      name="email"
                      value={editProfile.email}
                      onChange={handleChange}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm sm:text-base"
                    />
                  ) : (
                    <p className="text-gray-900 text-sm sm:text-base break-all">{profile.email}</p>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    <Phone className="h-4 w-4 inline mr-2" />
                    电话
                  </label>
                  {isEditing ? (
                    <input
                      type="tel"
                      name="phone"
                      value={editProfile.phone}
                      onChange={handleChange}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm sm:text-base"
                    />
                  ) : (
                    <p className="text-gray-900 text-sm sm:text-base">{profile.phone}</p>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    <MapPin className="h-4 w-4 inline mr-2" />
                    位置
                  </label>
                  {isEditing ? (
                    <input
                      type="text"
                      name="location"
                      value={editProfile.location}
                      onChange={handleChange}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm sm:text-base"
                    />
                  ) : (
                    <p className="text-gray-900 text-sm sm:text-base">{profile.location}</p>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    <Calendar className="h-4 w-4 inline mr-2" />
                    加入时间
                  </label>
                  <p className="text-gray-900 text-sm sm:text-base">{profile.joinDate}</p>
                </div>
              </div>

              <div className="mt-4 sm:mt-6">
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  个人简介
                </label>
                {isEditing ? (
                  <textarea
                    name="bio"
                    rows={3}
                    value={editProfile.bio}
                    onChange={handleChange}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm sm:text-base"
                  />
                ) : (
                  <p className="text-gray-900 text-sm sm:text-base">{profile.bio}</p>
                )}
              </div>
            </div>

            {/* 统计信息 - 移动端优化 */}
            <div className="border-t border-gray-200 px-4 sm:px-6 py-4 sm:py-6">
              <h2 className="text-base sm:text-lg font-medium text-gray-900 mb-4 sm:mb-6">使用统计</h2>
              
              <div className="grid grid-cols-3 gap-4 sm:gap-6">
                <div className="text-center">
                  <div className="text-xl sm:text-2xl font-bold text-blue-600">15</div>
                  <div className="text-xs sm:text-sm text-gray-500">翻译次数</div>
                </div>
                <div className="text-center">
                  <div className="text-xl sm:text-2xl font-bold text-green-600">8</div>
                  <div className="text-xs sm:text-sm text-gray-500">收藏地点</div>
                </div>
                <div className="text-center">
                  <div className="text-xl sm:text-2xl font-bold text-purple-600">3</div>
                  <div className="text-xs sm:text-sm text-gray-500">离线包</div>
                </div>
              </div>
            </div>

            {/* 账户设置 - 移动端优化 */}
            <div className="border-t border-gray-200 px-4 sm:px-6 py-4 sm:py-6">
              <h2 className="text-base sm:text-lg font-medium text-gray-900 mb-4 sm:mb-6">账户设置</h2>
              
              <div className="space-y-3 sm:space-y-4">
                <button className="w-full text-left px-3 sm:px-4 py-3 border border-gray-200 rounded-lg hover:bg-gray-50">
                  <div className="font-medium text-gray-900 text-sm sm:text-base">更改密码</div>
                  <div className="text-xs sm:text-sm text-gray-500">更新您的账户密码</div>
                </button>
                
                <button className="w-full text-left px-3 sm:px-4 py-3 border border-gray-200 rounded-lg hover:bg-gray-50">
                  <div className="font-medium text-gray-900 text-sm sm:text-base">隐私设置</div>
                  <div className="text-xs sm:text-sm text-gray-500">管理您的隐私偏好</div>
                </button>
                
                <button className="w-full text-left px-3 sm:px-4 py-3 border border-red-200 rounded-lg hover:bg-red-50 text-red-600">
                  <div className="font-medium text-sm sm:text-base">删除账户</div>
                  <div className="text-xs sm:text-sm text-red-500">永久删除您的账户和所有数据</div>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProfilePage;